import * as echarts from "echarts"
import 'echarts-wordcloud'
import "./css/my.css"
import axios from "axios"
import { Item, Restype } from "./type"




let getRes = async (url: string) => {
  const res = await axios.get(url)
  let data: Item[] = res["data"].map((e: Restype) => { return { name: e.k, value: e.v } })
  return data
}

window.onload = function () {
  echart01();
  echart02();
  echart03();
  echart04();
  echart05();
  echart06();

  async function echart01() {

    let data = await getRes("/api/degree")
    console.log(data)

    let total = data.reduce((sum: number, item: Item) => sum + item.value, 0);

    data = data.map((item: Item) => ({
      value: item.value,
      name: `${item.name} :${((item.value / total) * 100).toFixed(2)}%`
    }));

    let myEcharts = echarts.init(document.getElementById("pie"),"macarons");

    let option = {
      title: {
        text: '不同学历岗位数量比较',
        left: '37%',
        top: '10%',
        textStyle: {
          color: '#FFFFFF'
        },
        subtextStyle: {
          color: '#FFFFFF'
        }
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          left: '0',
          data: data,
          label: {
            color: '#FFFFFF'
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    myEcharts.setOption(option);
  }


  async function echart02() {
    let myEcharts = echarts.init(document.getElementById("fan"));

    let data = await getRes("/api/exp")

    let option = {
      title: {
        text: '不同经验的岗位数量比较',
        left: 'center',
        top: '10%',
        textStyle: {
          color: '#FFFFFF'
        },
        subtextStyle: {
          color: '#FFFFFF'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: data.map((item: Item) => item.name),
        axisLabel: {
          color: '#FFFFFF'
        },
        axisLine: {
          lineStyle: {
            color: '#FFFFFF'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#FFFFFF'
        },
        axisLine: {
          lineStyle: {
            color: '#FFFFFF'
          }
        }
      },
      series: [
        {
          type: 'bar',
          data: data.map((item: Item) => item.value),
          itemStyle: {
            color: '#1f78b4'
          }
        }
      ]
    };

    myEcharts.setOption(option);
  }


  function echart03() {
    let myEcharts = echarts.init(document.getElementById("packedbubble"));
    let option = {
      graphic: {
        elements: [
          {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
              text: '职位分析与趋势展望',
              fontSize: 50,
              fontWeight: 'bold',
              lineDash: [0, 200],
              lineDashOffset: 0,
              fill: 'transparent',
              stroke: '#000',
              lineWidth: 1
            },
            keyframeAnimation: {
              duration: 3000,
              loop: true,
              keyframes: [
                {
                  percent: 0.7,
                  style: {
                    fill: 'transparent',
                    lineDashOffset: 200,
                    lineDash: [200, 0]
                  }
                },
                {
                  percent: 0.8,
                  style: {
                    fill: 'transparent'
                  }
                },
                {
                  percent: 1,
                  style: {
                    fill: '#ffc578'
                  }
                }
              ]
            }
          }
        ]
      }
    };
    myEcharts.setOption(option);
  }

  async function echart04() {
    let myEcharts = echarts.init(document.getElementById("cylindrical"),"macarons");
    let keywords = await getRes("/api/skill")

    let option = {
      series: [{
        type: 'wordCloud',
        //maskImage: maskImage,
        sizeRange: [15, 80],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        shape: 'pentagon',
        width: '100%',
        height: '100%',
        textStyle: {
          normal: {
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            },
            fontFamily: 'sans-serif',
            fontWeight: 'normal'
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: keywords
      }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(option);
    window.addEventListener("resize", function () {
      myEcharts.resize();
    });

  }
  function echart05() {
    let myEcharts = echarts.init(document.getElementById("word_cloud"),"macarons");
    let option = {
      graphic: {
        elements: [
          {
            type: 'group',
            left: 'center',
            top: 'center',
            children: new Array(7).fill(0).map((_, i) => ({
              type: 'rect',
              x: i * 20,
              shape: {
                x: 0,
                y: -40,
                width: 10,
                height: 80
              },
              style: {
                fill: '#9d6068'
              },
              keyframeAnimation: {
                duration: 1000,
                delay: i * 200,
                loop: true,
                keyframes: [
                  {
                    percent: 0.5,
                    scaleY: 0.3,
                    easing: 'cubicIn'
                  },
                  {
                    percent: 1,
                    scaleY: 1,
                    easing: 'cubicOut'
                  }
                ]
              }
            }))
          }
        ]
      }
    };
    myEcharts.setOption(option);

  }
  async function echart06() {
    let myEcharts = echarts.init(document.getElementById("order"),"macarons");
    let data = await getRes("/api/salary")
    let option = {
      title: {
        text: '不同岗位的薪资对比'
      },
      legend: {
        data: ['平均薪资']
      },
      xAxis: {
        type: 'category',
        data: data.map(e => e.name),
        axisLabel: {
          rotate: 45
        }
      },
      yAxis: {
        type: 'value',
        min:20000
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      series: [{
        name: '平均薪资',
        type: 'line',
        data: data.map(e => e.value),
        label: {
          show: false,
          position: 'top'
        }
      }],
      animation: false
    };
    myEcharts.setOption(option);
  }

}